<template>

	<view>
		<view class="cu-bar fixed" :style="style" :class="[NavBarColor]">
			<view class="cuIcon-back margin-left" @tap="backRoute()"><text class="margin-left-sm">返回</text></view>
			<view class="content" :style="[{top:StatusBar + 'px'}]">
				部门选择
			</view>
		</view>
		<!-- 展示标题 -->
		<view class="bg-gray text-gray padding" :style="[{marginTop:CustomBar+'px'}]">
			{{ levelTitle }}
		</view>
		<!-- 展示部门和用户 -->
		<view class="cu-list menu sm-border">
			<view class="cu-item" v-for="(item, index) in comList" :key="item.key" @tap="goMember(item)">
				<image class="line2-icon" src="/static/folder.png"></image>
				<view class="content margin-left-sm">
					<view class="text-grey">{{item.title}}</view>
				</view>
			</view>
			<!-- 	<view class="cu-item" v-for="(item,index) in childrenUserList" :key="index" @click="goMemberInfo(item)">
				<view class="cu-avatar round lx" :style="[{backgroundImage:'url('+ item.avatar +')'}]"></view>
				<view class="content margin-left-sm">
					<view class="text-grey">{{item.realname}}</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getFileAccessHttpUrl
	} from "../../../api/api.js"
	export default {
		name: "level-address-book",
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				NavBarColor: this.NavBarColor,
				value: "",
				derpartment: '通讯录',
				comList: [],
				childrenUserList: [],
				metaList: [],
				depart2Url: '/sys/sysDepart/queryTreeList',
				queryTreeByKeyWord: '/sys/sysDepart/queryTreeByKeyWord',
				queryUserByDid: '/sys/user/appQueryByDepartId',
				// departUrl:'/sys/user/userDepartList',
				level: 0,
				titleArray: [],
				idArray: [],
				parentId: ''
			}
		},
		computed: {
			levelTitle() {
				if (this.titleArray && this.titleArray.length > 0) {
					return this.titleArray.join(' > ')
				}
				console.log("this.titleArray", this.titleArray)
				return ''
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onLoad() {
			console.log("this.CustomBar", this.CustomBar)
			this.loadList()
		},
		methods: {
			backRoute() {
				console.log("this.level", this.level)
				console.log("this.parentId", this.parentId)
				if (this.level == 0) {
					// 返回首页
					this.$Router.replaceAll({
						name: 'index'
					})
				} else {
					//正常列表的回退 只要找parentId的parent的data
					this.getCyclePnode(this.metaList, '');
					//还需要设置 title
					this.titleArray.pop();
					this.idArray.pop();
					this.level--;
				}
			},
			onRefresh() {
				this.comList = []
				this.childrenUserList = []
				this.titleArray = []
				this.loadList()
			},
			loadList() {
				console.log("ooooooooooooooooooooooooooooooooooooo")
				console.log(this.comList)
				console.log(this.metaList)
				console.log("loadList==>$Route", this.$Route)
				if (this.$Route.query.level) {
					let params = this.$Route.query
					this.level = params.level;
					this.comList = params.comList;
					this.metaList = params.metaList;
					this.childrenUserList = params.childrenUserList;
					this.derpartment = params.derpartment;
					this.parentId = params.parentId;
					this.titleArray = params.titleArray;
					return;
				}

				this.$http.get(this.queryTreeByKeyWord).then(res => {
					console.log("部门通讯树：：", res)
					if (res.data.success) {
						console.log("部门：：", res.data.result.departList)
						if (res.data.result.departList && res.data.result.departList.length > 0) {
							for (let item of res.data.result.departList) {
								console.log("item::", item);
								this.comList.push(item)
								this.metaList.push(item)
							}
							this.derpartment = this.comList[0].title
						}
					}
				}).catch(e => {
					console.log("queryTreeByKeyWord 请求错误", e)
				})
			},
			getUser(departId, title) {
				this.$http.get(this.queryUserByDid, {
					params: {
						departId: departId
					}
				}).then(res => {
					this.childrenUserList = res.data.result;
					for (let item of this.childrenUserList) {
						item.departName = title
						this.avatarHandler(item)
					}
				})
			},
			avatarHandler(item) {
				let avatar = item.avatar
				if (avatar) {
					// let url = getFileAccessHttpUrl(avatar);
					// item.avatar = url
				} else {
					if (item.sex == '2') {
						item.avatar = 'https://static.jeecg.com/upload/test/avatar_girl_1595818025488.png';
					} else {
						item.avatar = 'https://static.jeecg.com/upload/test/avatar_boy_1595818012577.png';
					}
				}

			},
			goMember(item) {
				let params = {
					...item
				}
				console.log('item==', item);
				if (params.children && params.children.length > 0) {
					this.level++;
					this.comList = [];
					this.childrenUserList = [];
					for (let item of params.children) {
						this.comList.push(item)
					}
					this.getUser(params.id, params.title)
					this.titleArray.push(params.title);
					this.idArray.push(params.id)
					this.parentId = params.id;
					this.derpartment = params.title;
				} else {
					this.level++;
					this.titleArray.push(params.title);
					this.idArray.push(params.id)
					console.log('id==', this.idArray)
					uni.$emit('departCallBack', {
						idArray: this.idArray,
						titleArray: this.titleArray
					})
					uni.navigateBack({
						delta: 1
					})
				}
			},
			getCyclePnode(arr, pid) {
				for (let item of arr) {
					if (item.id == this.parentId) {
						this.comList = arr;
						this.childrenUserList = [];
						this.derpartment = this.comList[0].title
						this.parentId = pid;
						this.getUser(this.parentId, item.title)
						break;
					}
					if (item.children && item.children.length > 0) {
						this.getCyclePnode(item.children, item.id)
					}

				}
			},
			goMemberInfo: function(item) {
				console.log("item", item)

				let parmas = {
					...item
				}
				console.log("parmas", parmas)
				parmas.page = 'levelAddressBook'
				this.$Router.push({
					name: 'addressDetail',
					params: parmas
				})
			},
		}
	}
</script>

<style>
	.line2-icon {
		width: 25px;
		height: 20px;
	}
</style>